<template>
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="bannerid" label="轮播图编号" />
    <el-table-column prop="pian" label="图片">
      <template #default="scope">
        <img class="img" :src="scope.row.img">
        <!-- //scope.row当前行数据 -->
      </template>
    </el-table-column>
    <el-table-column prop="alt" label="图片提示" />
    <el-table-column prop="link" label="图片连接" />
    <el-table-column label="是否启用">

      <template #default="scope">
        <el-switch v-model="scope.row.flag" @change="(val: boolean) => gengxin(scope.row.bannerid, val)" />
      </template>

    </el-table-column>
    <el-table-column label="删除">
      <template #default="scope">
      <el-popconfirm title="删我一个试试?" @confirm="shan(scope.row.bannerid)">
        <template #reference>
          <el-button>删除</el-button>
        </template>
      </el-popconfirm>
    </template>
    </el-table-column>
    <el-table-column label="删除全部">
      <template #default="scope">
      <el-popconfirm title="删我一个试试?" @confirm="shanchu(scope.row.bannerid)">
        <template #reference>
          <el-button>删除全部</el-button>
        </template>
      </el-popconfirm>
    </template>
    </el-table-column>
  </el-table>
  <el-table v-loading="loading" :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css';
import { reactive } from 'vue';
import service from '../../../utils/service';
import { ref } from 'vue'

const loading = ref(true)

const tableData = [
  {
    date: '2016-05-02',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-04',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
  {
    date: '2016-05-01',
    name: 'John Smith',
    address: 'No.1518,  Jinshajiang Road, Putuo District',
  },
]
interface mylist {
  bannerid: string,
  img: string,
  alt: string,
  jie: string,
  flag: boolean
}
let list = reactive<mylist[]>([]);
const getlist = () => {
  service({
    url: "/banner/list"
  })
    .then((res: any) => {
      if (res.data.code === "200") {
        list.length = 0;
        list.push(...res.data.data)
      }
    })
}
getlist();

const gengxin = (bannerid: string, val: boolean) => {
  service({
    url: "/banner/updateFlag",
    method: "post",
    data: {
      bannerid: bannerid,
      flag: val
    }
  })
    .then((res: any) => {
      if (res.data.code === "200") {
        alert("更新成功")
      }
    })
}
//删除
const shan = (bannerid: string) => {
  service({
    url: "/banner/delete",
    method: "get",
    params: {
      bannerid
    }
  })
  .then(res=>{
        if(res.data.code==="200"){
            ElMessage({
                message: '删除成功！',
                type: 'success',
            })
        getlist();
      }
    })
}
//删除全部
const shanchu = (bannerid: string) => {
  service({
    url: "/banner/removeAll",
    method: "get",
  })
    .then((res: any) => {
      if (res.data.code === "200") {
        ElMessage({
          message: '删除成功',
          type: 'success',
        })
        getlist();
      }
      // shan.splice(0,shan.bannerid)
    })
}
</script>

<style scoped>
.img {
  width: 150px;
  height: 150px;
}
body {
  margin: 0;
}
.example-showcase .el-loading-mask {
  z-index: 9;
}
</style>